Continuing from the previous lesson, we're now ready to hook up our new components and see simple examples
of how these might be used.
First up, being this color picker that we've labeled theme, the reason I made this label theme as
that will now configure this picture to be used for changing the background, colour or theme of this
main window.
Back in the docks, I'll never get to that component.
And here we see some of the available options, for example, specifying an array of available colors
instead of the default IGB or simple color palettes, a preselected color.
And lastly, what we need change.
This option takes a callback to fire each time the selected colors changed with a single callback parameter
of that newly selected colors hex code.
Add an options object to that picture setting change to a function with the selected color and as per
the label next to this color picker, we can use this to change some aspect of the main Windows theme.
For example, let's set the background color of the main Windows body element calling main window dot
web contents.
Insert success with that new string body.
Background color to this argument provided by the change callback as a template, literal variable.
Save this to test.
Open the picker, which currently has the simple pick, a palette selected, click this green and the
body is updated accordingly each time I select a different color.
This will now also work with color sliders.
For example, moving to the sliders, change the amount of red.
And again, the body is updated dynamically as that change function fires constantly with the slider
being dragged.
So a pretty straightforward but very useful component.
We can do the same for our touch base slider inside this popover up here.
This already has most of its options said to make this complete.
I'll also set the initial value to 500, same as the minimum.
Again, as per the Sliders label.
I'll have this resize.
The main window to do that, we can again provide a change option like the color picker now providing
us the value of the slider as a changes calling in this callback main window, dot set size, first
argument being the width make that vowel and second being the window height, also the value of the
slider.
So keeping a square.
And lastly, true meaning resize this window with animation just makes it a bit smoother.
I'll change the main windows initial dimensions to match the sliders initial value of 500 width to five
hundred and height to five hundred save.
We now get a 500 by 500 window.
So open the slider being set to its initial minimum value of 500 as the window drag that up and the
window is resized along with it.
So again, a very powerful integration between the Max Touch Ball and our app with a minimal amount
of code.
That's we will leave the TouchPad module for now.
But as we can see from the docs, there's still a number of other great components.
I'd encourage you to take a look at more of these and make your touch by integration a standout feature
for Mac users.